<template>
    <div class="container">
        <!-- 管理平台--主体列表展示 -->
        <div class="skillmanageMentMain">
            <el-row>
                <el-col :span="12">
                    <el-col :span="24" style="padding-right: 16px;">
                        <el-form
                                :inline="true"
                                :model="formData"
                                class="demo-form-inline"
                                style="margin-bottom: 16px;display: inline-block;"
                                size="small"
                        >
                            <el-form-item label="技能组编码">
                                <el-input v-model="formData.skillCode" placeholder="请输入技能组编码"></el-input>
                            </el-form-item>
                            <el-form-item label="技能组名称">
                                <el-input v-model="formData.skillName" placeholder="请输入技能组名称"></el-input>
                            </el-form-item>
                            <el-button
                                    type="primary"
                                    size="small"
                                    icon="el-icon-search"
                                    @click="hanlesearch"
                                    :loading="searchLoading"
                                    class="searchBtn"
                            >查询</el-button>
                            <el-button
                                    type="primary"
                                    size="small"
                                    icon="el-icon-refresh-right"
                                    @click="handleReset"
                                    :loading="resetLoading"
                                    class="resetBtn"
                            >重置</el-button>
                            <el-button
                                    type="primary"
                                    size="small"
                                    icon="el-icon-circle-plus-outline"
                                    @click="hanlePush"
                            >新增</el-button>
                        </el-form>
                    </el-col>

                    <el-col :span="24" style="padding-right: 16px;">
                        <el-table
                                :data="tableData"
                                width="100%"
                                border
                                highlight-current-row
                                @row-click="handleClick"
                                stripe
                                class="heard-bg"
                        >
                            <el-table-column label="技能组编码" prop="skillCode"></el-table-column>
                            <el-table-column label="技能组名称" prop="skillName"></el-table-column>
                            <el-table-column label="技能组级别" prop="skillLevel">
                                <template slot-scope="scope"
                                >{{scope.row.skillLevel|filter_skillLevel(skillLevelOption)}}</template>
                            </el-table-column>
                            <el-table-column label="操作">
                                <template slot-scope="scope">
                                    <el-button
                                            type="primary"
                                            icon="el-icon-edit"
                                            circle
                                            @click="handleEdit(scope.row)"
                                    />
                                    <el-button
                                            type="danger"
                                            icon="el-icon-delete"
                                            circle
                                            @click="handleDelete(scope.row)"
                                    />
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 分页 -->
                        <div class="pagination">
                            <Pagination
                                    :hanleChangeCurrentPage="hanleChangeCurrentPage"
                                    :handleChangeSize="handleChangeSize"
                                    :currentPage="currentPage"
                                    :pageSize="pageSize"
                                    :total="total"
                            />
                        </div>
                    </el-col>
                </el-col>

                <el-col :span="12">
                    <el-tabs @tab-click="binding">
                        <el-tab-pane label="绑定"></el-tab-pane>
                        <el-tab-pane label="未绑定"></el-tab-pane>
                    </el-tabs>
                    <div wherherOrbind>
                        <el-table
                                :data="tableDataDetail"
                                width="100%"
                                border
                                @selection-change="handleSelectChange"
                                stripe
                                class="heard-bg"
                        >
                            <el-table-column width="55" type="selection"></el-table-column>
                            <el-table-column width="70" label="序号" type="index"></el-table-column>
                            <el-table-column label="用户账号" prop="userAccount"></el-table-column>
                            <el-table-column label="所属机构" prop="deptName"></el-table-column>
                            <el-table-column label="用户名称" prop="userName"></el-table-column>
                            <el-table-column label="用户类型" prop="userType">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.userType === '0'">普通用户</span>
                                    <!--<span v-else-if="scope.row.userType === '1'">超级管理员</span>-->
                                    <span v-else-if="scope.row.userType === '2'">超级管理员</span>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- 分页 -->
                        <div class="pagination">
                            <Pagination
                                    :hanleChangeCurrentPage="hanleChangeCurrentPageDetail"
                                    :handleChangeSize="handleChangeSizeDetail"
                                    :currentPage="currentPageDetail"
                                    :pageSize="pageSizeDetail"
                                    :total="totalDetail"
                            />
                        </div>
                        <el-button
                                type="primary"
                                size="small"
                                icon="el-icon-s-custom"
                                style="float:right;margin-top:35px;"
                                @click="handlewherherOrbind"
                        >{{wherherOrbind ? '解绑' : '绑定'}}</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>

        <!--新增技能组-->
        <el-dialog
                v-drag
                :close-on-click-modal="false"
                :visible.sync="Show"
                append-to-body
                center
                width="500px"
        >
            <div slot="title">{{EditTitle}}</div>
            <el-form
                    :model="Edit"
                    class="menu-setting"
                    label-position="right"
                    ref="Edit"
                    label-width="110px"
                    :rules="formRules"
                    size="small"
            >
                <el-form-item label="技能组编号" prop="roleName">
                    <el-input
                            v-model="Edit.skillCode"
                            placeholder="请输入"
                            style="width: 200px;"
                            v-bind:disabled="diasableSkillCode"
                    />
                </el-form-item>
                <el-form-item label="技能组名称" prop="skillName">
                    <el-input v-model="Edit.skillName" placeholder="请输入" style="width: 200px;" />
                </el-form-item>
                <el-form-item label="技能组级别" prop="skillLevel">
                    <el-select
                            placeholder
                            v-model.trim="Edit.skillLevel"
                            clearable
                    >
                        <el-option
                                v-for="item in skillLevelOption"
                                :key="item.code"
                                :label="item.label"
                                :value="item.code"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                        size="small"
                        icon="el-icon-circle-close"
                        @click="Show = false"
                        class="cancelBtn"
                >取 消</el-button>
                <el-button
                        type="primary"
                        size="small"
                        @click="submitEdit"
                        class="submitBtn"
                        icon="el-icon-circle-check"
                >确定</el-button>
            </div>
        </el-dialog>
        <!--坐席列表-->
        <el-dialog
                v-drag
                :close-on-click-modal="false"
                :visible="agentListDialogShowFlag"
                append-to-body
                center
                width="1000px"
                @close="agentListDialogShowFlag = false"
        >
            <div slot="title">坐席列表</div>
            <el-form
                    :inline="true"
                    :model="agentListFormData"
                    class="demo-form-inline"
                    size="small"
            >
                <el-form-item label="用户账号">
                    <el-input v-model="agentListFormData.userAccount" placeholder="请输入用户账号"></el-input>
                </el-form-item>
                <el-form-item label="用户名称">
                    <el-input v-model="agentListFormData.userName" placeholder="请输入用户名称"></el-input>
                </el-form-item>
                <el-button
                        type="primary"
                        size="small"
                        icon="el-icon-search"
                        @click="agentListHanlesearch"
                        :loading="agentList.agentListSearchLoading"
                >查 询</el-button>
                <el-button
                        type="primary"
                        size="small"
                        icon="el-icon-refresh-right"
                        @click="agentListHandleReset"
                        :loading="agentList.agentListResetLoading"
                >重 置</el-button>
            </el-form>
            <el-table
                    :data="agentList.agentListTableData"
                    width="100%"
                    border
                    highlight-current-row
                    @row-click="agentListSelectChange"
                    stripe
                    class="heard-bg"
            >
                <el-table-column label="选择" width="50">
                    <template slot-scope="scope">
                        <el-radio
                                v-model="Edit.leaderId"
                                :ref="scope.row.userAccount"
                                :label="scope.row.userName"
                        >{{ "" }}</el-radio>
                    </template>
                </el-table-column>
                <el-table-column label="用户账号" prop="userAccount"></el-table-column>
                <el-table-column label="所属机构" prop="deptName"></el-table-column>
                <el-table-column label="用户名称" prop="userName"></el-table-column>
                <el-table-column label="用户类型" prop="userType">
                    <template slot-scope="scope">
                        <span v-if="scope.row.userType === '0'">普通用户</span>
                        <!--<span v-else-if="scope.row.userType === '1'">超级管理员</span>-->
                        <span v-else-if="scope.row.userType === '2'">超级管理员</span>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <Pagination
                        :hanleChangeCurrentPage="hanleChangeCurrentPageDetail"
                        :handleChangeSize="handleChangeSizeDetail"
                        :currentPage="agentList.agentListCurrentPage"
                        :pageSize="agentList.agentListPageSize"
                        :total="agentList.agentListTotal"
                />
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button
                        size="small"
                        @click="agentListDialogShowFlag = false"
                        class="cancelBtn"
                >取 消</el-button>
                <el-button
                        type="primary"
                        size="small"
                        @click="determineButton"
                        class="submitBtn"
                        icon="el-icon-circle-check"
                >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import Pagination from '@/components/Pagination/Pagination.vue';
    import { getDictSelectList } from '@/utils/Common';

    export default {
        name: 'skillManagement',
        data() {
            return {
                skillLevelOption: [],
                formData: {
                    skillCode: '',
                    skillName: '',
                },
                agentListFormData: {
                    userAccount: '',
                    userName: '',
                },
                // 新增字典字段
                Edit: {
                    skillCode: '',
                    skillName: '',
                    leaderId: '',
                    leaderName: '',
                },
                EditTitle: '',
                Show: false,
                // 搜索loading
                searchLoading: false,
                // 重置loading
                resetLoading: false,
                formRules: {
                    skillCode: [
                        { max: 50, message: '字符最大长度为50', trigger: 'blur' },
                    ],
                    skillName: [
                        { max: 50, message: '字符最大长度为50', trigger: 'blur' },
                    ],
                },
                // 当前页码
                currentPage: 1,
                // 页码大小
                pageSize: 10,
                // 总数
                total: 0,
                // 当前页码
                currentPageDetail: 1,
                // 页码大小
                pageSizeDetail: 10,
                // 总数
                totalDetail: 0,
                // 表格内容
                tableData: [],
                // 表格内容
                tableDataDetail: [],
                selections: [],
                rowObj: {},
                wherherOrbind: true,
                bindFlag: 1,//1 绑定  2 解绑
                bindFlagId: '',
                diasableSkillCode: false,
                agentListDialogShowFlag: false,
                //坐席列表内容
                agentList: {
                    formData: {
                        loginId: '',
                        loginName: '',
                    },
                    agentListTableData: [],
                    // 当前页码
                    agentListCurrentPage: 1,
                    // 页码大小
                    agentListPageSize: 10,
                    // 总数
                    agentListTotal: 0,
                    agentListSelections: '',
                    agentListSearchLoading: false,
                    agentListResetLoading: false,
                },
            };
        },
        filters: {
            filter_skillLevel(value, skillLevelOption) {
                console.log("value::",value);
                console.log("skillLevelOption::",skillLevelOption);
                if (value) {
                    let filterValue = '';
                    skillLevelOption.some((item) => {
                        if (item.code === value) {
                            filterValue = item.label;
                            return true;
                        }
                    })
                    return filterValue;
                }
            },
        },
        components: {
            Pagination,
        },
        async mounted() {
            this.getInitData(this.formData);
            this.skillLevelOption = await getDictSelectList('SKILL_LEVEL', this);
        },
        methods: {
            getInitData(form) {
                let params = {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                };
                params = Object.assign({}, params, form);
                this.$post.skillMangage.pageSkillGroup(params)
                    .then((res) => {
                        if (res.data.success) {
                            this.tableData = res.data.content.records;
                            this.total = res.data.content.total;
                        }
                    });
            },
            handleSelectChange(val) {
                this.selections = val;
            },
            // 点击某一行查询详情
            handleClick(row) {
                this.rowObj = row;
                const params = {
                    pageNum: this.currentPageDetail,
                    pageSize: this.pageSizeDetail,
                    id: row.id,
                    bindFlag: this.bindFlag,
                };
                console.log("params::::",params);
                this.$post.userManage.getUserListBySkillId(params)
                    .then((res) => {
                        if (res.data.success) {
                            this.tableDataDetail = res.data.content.userList;
                            this.totalDetail = res.data.content.userCount;
                        }
                    });
                this.currentPageDetail = 1;
            },
            // 点击搜索
            hanlesearch() {
                this.currentPage = 1;
                this.pageSize = 10;
                this.getInitData(this.formData);
                this.tableDataDetail = [];
                this.totalDetail = 0;
            },
            // 点击重置
            handleReset() {
                this.formData = {
                    skillCode: '',
                    skillName: '',
                    userAccount: '',
                    userName: '',
                };
                this.currentPage = 1;
                this.pageSize = 10;
                this.getInitData(this.formData);
                this.tableDataDetail = [];
                this.totalDetail = 0;
            },
            // 点击新增
            hanlePush() {
                this.EditTitle = '添加技能组';
                this.Edit = {};
                this.Show = true;
                this.diasableSkillCode = false;
                // 解决一进来就进行表单验证问题
                if (this.$refs.Edit) {
                    this.$refs.Edit.resetFields();
                } else {
                    this.$nextTick(() => {
                        // this.$refs.Edit.resetFields();
                    });
                }
            },
            // 点击编辑
            handleEdit(row) {
                this.EditTitle = '编辑技能组';
                this.Edit = JSON.parse(JSON.stringify(row));
                this.Show = true;
                this.diasableSkillCode = true;
                if (this.$refs.Edit) {
                    this.$refs.Edit.resetFields();
                } else {
                    this.$nextTick(() => {
                        // this.$refs.Edit.resetFields();
                    });
                }
            },
            // 单个删除角色
            handleDelete(row) {
                this.$confirm('确认删除该群组？', '提示', { customClass: 'warning', type: 'warning' })
                    .then(() => {
                        this.$post.skillMangage.deleteSkillGroup({ id: row.id })
                            .then((res) => {
                                if (res.data.success) {
                                    this.$message.success('删除成功！');
                                    if (this.tableData.length === 1) {
                                        this.currentPage = this.currentPage - 1;
                                    }
                                    this.getInitData(this.formData);
                                    this.tableDataDetail = [];
                                    this.totalDetail = 0;
                                } else {
                                    this.$message.error(res.data.msg);
                                }
                            });
                    })
                    .catch(() => {
                    });
            },


            // 新增点击确定按钮
            submitEdit() {
                if (this.Edit.id) {
                    // 编辑
                    this.$refs.Edit.validate((valid) => {
                        if (valid) {
                            this.$post.skillMangage.updateSkillGroup(this.Edit)
                                .then((res) => {
                                    if (res.data.success) {
                                        this.$message.success('修改成功！');
                                        this.getInitData(this.formData);
                                        this.Show = false;
                                    } else {
                                        this.$message.error(res.data.msg);
                                    }
                                });
                        } else {
                            this.$message.warning('请完成表单填写！');
                        }
                    });
                } else {
                    // 添加
                    this.$refs.Edit.validate((valid) => {
                        if (valid) {
                            console.log("this.Edit::::",this.Edit);
                            this.$post.skillMangage.addSkillGroup(this.Edit)
                                .then((res) => {
                                    if (res.data.success) {
                                        this.$message.success('添加成功！');
                                        this.getInitData(this.formData);
                                        this.tableDataDetail = [];
                                        this.totalDetail = 0;
                                        this.Show = false;
                                    } else {
                                        this.$message.error(res.data.msg);
                                    }
                                });
                        } else {
                            this.$message.warning('请完成表单填写！');
                        }
                    });
                }
            },
            binding(tab) {
                if (tab.label === '绑定') {
                    this.wherherOrbind = true;
                    this.bindFlag = 1;
                    this.handleClick(this.rowObj);
                } else {
                    this.wherherOrbind = false;
                    this.bindFlag = 2;
                    this.handleClick(this.rowObj);
                }
            },
            // 用户点击绑定按钮
            handlewherherOrbind() {
                if (!this.rowObj.id) {
                    this.$message.warning('请先选择一项角色进行操作！');
                    return;
                }
                if (this.selections.length <= 0) {
                    this.$message.warning('至少选择一项进行操作！');
                    return;
                }
                const arr = [];
                this.selections.forEach((item) => {
                    arr.push(item.id);
                });
                if (this.bindFlag === 1) {
                    this.bindFlagId = 2;
                } else {
                    this.bindFlagId = 1;
                }
                // 执行解绑操作
                const params = {
                    bindFlag: this.bindFlagId,
                    id: this.rowObj.id,
                    ids: arr,
                };
                // params = Object.assign({}, params, arr);
                this.$post.grantRole.bindSkillUser(params)
                    .then((res) => {
                        if (res.data.success) {
                            this.$message.success('操作成功！');
                            if (this.tableDataDetail.length === 1) {
                                this.currentPageDetail = this.currentPageDetail - 1;
                            }
                            this.handleClick(this.rowObj);
                        } else {
                            this.$message.error(res.data.msg);
                        }
                    });
            },


            // 页码切换方法
            hanleChangeCurrentPage(val) {
                this.currentPage = val;
                this.getInitData(this.formData);
                this.tableDataDetail = [];
                this.totalDetail = 0;
            },
            // 切换分页大小方法
            handleChangeSize(val) {
                this.pageSize = val;
                this.getInitData(this.formData);
                this.tableDataDetail = [];
                this.totalDetail = 0;
            },
            // 页码切换方法
            hanleChangeCurrentPageDetail(val) {
                this.currentPageDetail = val;
                this.handleClick(this.rowObj);
            },
            // 切换分页大小方法
            handleChangeSizeDetail(val) {
                this.pageSizeDetail = val;
                this.handleClick(this.rowObj);
            },
            addLeaderButton(form) {
                let params = {
                    pageNum: this.agentList.agentListCurrentPage,
                    pageSize: this.agentList.agentListPageSize,
                };
                params = Object.assign({}, params, form);
                this.$post.userManage.getUserListBySkillId(params)
                    .then((res) => {
                        if (res.data.success) {
                            this.agentList.agentListTableData = res.data.content.userList;
                            this.agentList.agentListTotal = res.data.content.userCount;
                            this.agentListDialogShowFlag = true;
                        }
                    });

            },
            agentListSelectChange(val) {
                this.agentList.agentListSelections = val;

            },
            determineButton() {
                this.Edit.leaderId = this.agentList.agentListSelections.userAccount;
                this.Edit.leaderName = this.agentList.agentListSelections.userName;
                this.agentListDialogShowFlag = false;
            },
            // 点击坐席列表搜索
            agentListHanlesearch() {
                this.agentList.agentListCurrentPage = 1;
                this.agentList.agentListPageSize = 10;
                this.addLeaderButton(this.agentListFormData);
                this.agentList.agentListTableData = [];
                this.agentList.agentListTotal = 0;
            },
            // 点击坐席列表重置
            agentListHandleReset() {
                this.agentListFormData = {
                    userAccount: '',
                    userName: '',
                };
                this.agentList.agentListCurrentPage = 1;
                this.agentList.agentListPageSize = 10;
                this.addLeaderButton(this.agentListFormData);
                this.agentList.agentListTableData = [];
                this.agentList.agentListTotal = 0;
            },
        },
    };
</script>
<style lang="scss">
    .skillmanageMentMain {
        .el-tabs__item {
            padding: 0 15px !important ;
            border: 1px solid #409eff;
            border-radius: 4px;
            margin-right: 3px;
            color: #409eff;
        }
        .is-active {
            background-color: #409eff;
            color: #fff;
        }
    }
</style>
<style  lang="scss" scoped>
    .container {
        width: 100%;
        height: 100%;
        .skillmanageMentMain {
            width: 100%;
            background: #fff;
            margin: 0 0 15px;
            // border-radius:5px;
            padding: 20px;
            box-sizing: border-box;
            text-align: left;
            .tableTitle {
                width: 100%;
                height: 48px;
                border: 1px solid #eee;
                border-bottom: none;
                line-height: 48px;
                margin-top: 20px;
                color: #666;
            }
            .pagination {
                margin-top: 20px;
                text-align: right;
                float: left;
            }
        }
    }
</style>
